<template>
  <!--登录页-->
  <div class="login_max_div">
    <el-container style="padding: 30px;">
      <el-header>
        <el-row :gutter>
          <el-col :span="3">
            <img class="login_header_img" src="/imgs/login/logo.png">
          </el-col>
          <el-col :span="1">
            <img class="login_header_img" src="/imgs/login/auto.png">
          </el-col>
          <el-col :span="1">
            <img class="login_header_img" src="/imgs/login/verticalLine.png">
          </el-col>
          <el-col :span="19">
            <span class="login_title">智慧车辆运营系统</span>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <el-row :gutter="40">
          <el-col :span="16">
            <img class="login_main_bg" src="/imgs/login/bg.png">
          </el-col>
          <el-col :span="8">
            <el-card class="login_card">
              <h3 style="text-align: center;">用户登录(李岳徽)</h3>
              <el-form label-position="top">
                <el-form-item label="用户名">
                  <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                  <el-input type="password" show-password placeholder="请输入密码" @keydown.enter="login"
                            v-model="user.password"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="login" style="width: 100%;">登录</el-button>
                </el-form-item>
              </el-form>
              <div class="login_account">(体验账号: tom/123456)</div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
// 定义响应式对象用来保存登录表单中的数据
import {ref} from "vue";
import axios from "axios";
import router from "@/router";
import {ElMessage} from "element-plus";

const user = ref({username: '', password: ''});
const login = () => {
  console.log(user.value);
  // 通过axios发送post请求
  axios.post(BASE_URL + '/v1/user/login', user.value)
      .then((response) => {
        // 回调函数:服务器响应后才执行此处代码
        // response是响应对象,我们可以通过response.data得到服务器的响应数据
        console.log(response.data);
        if (response.data.code === 2000) {
          ElMessage.success('登录成功');
          window.setTimeout(() => {
            sessionStorage.setItem('user', JSON.stringify(response.data.data));
            // 登录成功后跳转到首页,并重定向到/user用户列表页
            router.push('/');
          }, 1000);
        } else {
          ElMessage.error(response.data.msg);
          // 登录失败清空表单数据
          user.value = {username: '', password: ''};
        }
      });
}
</script>

<style scoped>
.login_max_div {
  height: 100vh;
  background-image: linear-gradient(135deg, #1352F2, #3C82F5);
  overflow: hidden;
}

.login_header_img {
  height: 50px;
}

.login_title {
  line-height: 50px;
  color: white;
  font-size: 30px;
  font-weight: bold;
}

.login_main_bg {
  width: 100%;
  margin-top: 60px;
}

.login_card {
  margin-top: 80px;
  width: 400px;
}

.login_account {
  color: #666;
  text-align: center;
  font-size: 14px;
  padding: 10px 0;
}
</style>